<script setup>
import {inject} from "vue";

const props = defineProps({
  name: {
    type: String
  },
  age: {
    type: Number
  }
})

const emit = defineEmits(["changeName", "plusAge"]);
const plusAge = () => {
  emit("plusAge", props.age + 1);
}
const changeName = (value) => {
  emit("changeName", value);
}

// 暴露给父组件
defineExpose({
  plusAge
})

// provide 和 inject
const num = inject('f-num')
const updateNum = inject('update-num')
</script>

<template>
  <div class="son">我是儿子组件 --- 名字是{{ props.name }} -- 年龄是{{ props.age }}</div>
  <button @click="changeName('张艺')">修改名字</button>
  <button @click="plusAge">增加年龄</button>
  <div>
    父组件传给我的是{{ num }}
    <button @click="updateNum(5)">修改数量</button>
  </div>

</template>

<style scoped>
.son {
  width: 100px;
  height: 100px;
  background-color: #409eff;
}
</style>
